<template>
  <div class="page">
    <div class="list">
      <div
        class="list-item"
        v-for="(item, index) in menuList"
        :key="index"
        @click="itemAction(item)"
      >
        <div class="list-item-icon mid">
          <img :src="item.icon" width="28" height="32" alt="图标" />
        </div>
        <div class="list-item-content mid">
          <div>
            <div class="title">{{ item.name }}</div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
        <div class="list-item-extra mid">
          <img :src="url.icon_arrow_right" width="12" height="24" alt="箭头" />
        </div>
      </div>

      <div class="explain">
        <p>
          1）用户只需在<span class="red">第一次</span>注册环节录入<span
            class="red"
            >全面信息</span
          >，此后只需每天或按学校规定的时间登录并确认提交即可，过程中只需对极少量的信息变更进行操作，<span
            class="red"
            >无变动无操作</span
          >。
        </p>
        <p>
          2）<span class="red">学生</span
          >含幼儿园孩子、中小学生、大学及大学以上学生。
        </p>
        <p>
          3）一个<span class="red">家庭</span>中的<span class="red">所有</span
          >学生，<span class="red">走读</span>（住家）时<span class="red"
            >只需</span
          >用同一个<span class="red">“家庭账户”</span>统一管理。
        </p>
        <p>
          4）<span class="red">住宿</span
          >的大学及大学以上学生，住宿时（非住家）需要申请自己的<span class="red"
            >“个人账户”</span
          >。
        </p>
        <p>
          5）<span class="red">住宿</span>的大学<span class="red">以下</span
          >学生，依据<span class="red">学校规定</span
          >，或者申请自己的“个人账户”，或者由<span class="red">学校</span
          >的“宿舍管理系统”集中管理。
        </p>
        <p>
          6）同一个学生在<span class="red">同一时间</span
          >，只能在“家庭账户”或者“个人账户”中的一个，被维护为<span class="red"
            >“存在状态”</span
          >。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import menuDict from './dict/menu'
import {
  getFamilyInfo,
  getParentInfo,
  getTeacherInfo,
  getWorkerInfo,
  getOutsiderInfo,
  getStudentInfo,
} from '@/api/school.js'

export default {
  data() {
    return {
      url: {
        icon_arrow_right: require('../../assets/images/school/icon_arrow_golden.png'),
      },
      userInfo: {},
      menuList: menuDict.childrenEnter,
      dictData: {},
      dialogShow: false,
      dialogTitle: '',
      dialogState: '',
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.userInfo = this.$store.state.user.userInfo
  },
  methods: {
    async itemAction(item) {
      if (!this.userInfo.card_no) {
        this.$toast('缺少参数')
        return
      }
      // 设置学生入口类型
      localStorage.setItem('childrenType', item.id)
      // 判断是否注册过
      if (item.id == 'out') {
        const familyInfo = await getFamilyInfo({
          card_no: this.userInfo.card_no,
        })
        if (familyInfo.data.errcode == 0) {
          if (this.$common.xeUtils.isEmpty(familyInfo.data.data)) {
            this.$router.push({
              path: '/school/family',
              query: {
                isFirst: 1,
              },
            })
          } else {
            this.$router.push({
              path: '/school/family-list',
              query: { parent_id: familyInfo.data.data.parent_id },
            })
          }
        }
      } else {
        this.$toast('暂未开放')
        return
      }
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  background: url('../../assets/images/school/bg_enter_new.png') no-repeat;
  background-size: contain;
  padding: 30px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  color: black;
  overflow: auto;

  .dialog {
    height: 800px;
    // 内容
    /deep/ .van-dialog__content {
      overflow-y: auto;
      height: 100%;
    }

    // 操作栏
    /deep/ .van-dialog__footer {
      transform: translate3d(0, 0, 0);
      width: 100%;
      position: absolute;
      bottom: 0;
    }

    // 对话框内容
    &-container {
      min-height: 200px;
      color: #000;
      padding: 10px 10px 120px;
    }
  }

  .list {
    margin-bottom: 100px;
    margin-top: 90%;
    //background-color: #ffffff;
    width: 100%;
    border-radius: 20px;
    box-sizing: border-box;

    & > :not(:last-child) {
      margin-bottom: 20px;
    }

    .list-item {
      min-height: 80px;
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      background-image: url('../../assets/images/school/bar_golden.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 30px 30px;
      border-radius: 5px;
      &-content {
        width: 75%;
        text-align: left;
        padding: 0px 8px;
        .title {
          font-weight: 500;
          font-size: 22px;
          line-height: 48px;
          text-align: left;
          color: #d58913;
        }
        .text {
          font-weight: 500;
          font-size: 16px;
          text-align: left;
          color: #d58913;
        }

        .desc {
          font-size: 24px;
        }
      }

      &-extra {
        font-weight: bold;
      }
    }
  }
}
.explain {
  padding: 10px 25px;
  background-image: url('../../assets/images/school/bar_golden.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 5px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
}
.red {
  color: red;
  font-weight: 600;
}
</style>
